<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="lib/layui/css/layui.css">
		<link rel="stylesheet" href="css/admin.css">
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
	</head>
	<body>
		<!--  {type: 'checkbox', fixed: 'left'}
      ,{field:'dealno', title:'流水号'}
      ,{field:'dealdate', title:'交易时间'}
      ,{field:'transtype', title:'转账类型' }
      ,{field:'accout', title:'转出账号'}
      ,{field:'accoutname', title:'用户名'}
	  ,{field:'accoutbank', title:'转出银行'}
	  ,{field:'accin', title:'转入账号'}
	  ,{field:'accinname', title:'转入用户' }
	  ,{field:'accinbank', title:'转入银行'}
	  ,{field:'currtype', title:'货币类型'}
	  ,{field:'transfund', title:'转账金额'}
	  ,{field:'descriptions', title:'描述'},
	  ,{field:'transstatus', title:'转账状态'} -->
	  <div id="app">


		 

		  <div class="layui-form-item">
			  <label class="layui-form-label" >用户账号</label>
			  <div class="layui-input-inline">
				  <input type="text" name="username"  placeholder="请输入" v-model="transferInfo.accOut" class="layui-input">
			  </div>
			  <label class="layui-form-label" >用户姓名</label>
			  <div class="layui-input-inline">
				  <input type="text" name="username"  placeholder="请输入" v-model="transferInfo.accOutName" class="layui-input">
			  </div>
		  </div>
		  <div class="layui-form-item">


			  <label class="layui-form-label" >收款银行</label>
			  <div class="layui-input-inline">
				  <input type="text" name="username"  placeholder="请输入" v-model="transferInfo.accInBank"  class="layui-input">
			  </div>
			  <label class="layui-form-label" >收款人姓名</label>
			  <div class="layui-input-inline">
				  <input type="text" name="username" placeholder="请输入" v-model="transferInfo.accInName"  class="layui-input">
			  </div>
			  <button type="button" class="layui-btn layui-btn-radius"  v-on:click="goSearch">搜索</button>
		  </div>
		<table class="layui-table">
		  <colgroup>

		    <col width="20">
		    <col width="20">


		  </colgroup>
		  <thead>
		    <tr>
		      <th >流水号</th>
		      <th>交易时间</th>
		      <th>转账类型</th>
			  <th>转出账号</th>
				<th>用户名</th>
			  <th>转出银行</th>
			  <th>转入账号</th>
			  <th>转入用户</th>
			  <th>转入银行</th>
			  <th>货币类型</th>
			  <th>转账金额</th>
				<th>交易类型</th>
			  <th>描述</th>
			  <th>转账状态</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr v-for="(item,i) in transfer.transfers">
		      <td>{{item.dealno}}</td>
		      <td>{{item.dealdate}}</td>
		      <td><!--{{item.transtype}}-->
			  	<span v-if="item.transtype==0">行内转账</span>
				  <span v-else-if="item.transtype==1">跨行转账</span>
			  </td>
			  <td>{{item.accout}}</td>
			  <td>{{item.accoutname}}</td>
			  <td>{{item.accoutbank}}</td>
			  <td>{{item.accin}}</td>
			  <td>{{item.accinname}}</td>
			  <td>{{item.accinbank}}</td>
			  <td>{{item.currtype}}</td>
			  <td>{{item.transfund}}</td>
				<td>{{item.kind}}</td>
				<td>{{item.descriptions}}</td>
				<td><!--{{item.transstatus}}-->
				<span v-if="item.transstatus==0">成功</span>
					<span v-else-if="item.transstatus==1">实时</span>
					<span v-else-if="item.transstatus==3">次日</span>
					<span v-else-if="item.transstatus==4">处理中</span>
					<span v-else-if="item.transstatus==5">失败</span>
					<span v-else-if="item.transstatus==6">网络问题</span>
				</td>
			  
		    </tr>

		  </tbody>
		</table>
		  <button class="layui-btn layui-btn-radius"  v-on:click="prevPage">上一页</button>
		 	<span style="font-size: 20px">共{{transfer.pageCount}}</span>
		  <button class="layui-btn layui-btn-radius"  v-on:click="nextPage">下一页</button>
		 <span>
			 <input type="text"  width="20px" v-model="transferInfo.index" style="width: 20px">页
		 	 <button type="button"  class="layui-btn layui-btn-radius" v-on:click="goPage" >go</button>
		 </span>


	 </div>
	 <script src="js/jquery-3.4.1.min.js"></script>
	 <script src="lib/layui/layui.js"></script>
	 <script src="js/admin.js"></script>
	 <script type="text/javascript">
	 	var app = new Vue({
	 	el:"#app",
	 	data:{
			msg:"zhangsna",
			transferInfo:{
				queryDate:null,
				accOut:"",
				accOutName:"",
				accInBank:"",
				accInName:"",
				end:null,
				start:null,
				pageCount:null,
				index:1,
				pageSize:8
			},
			transfer:{}
	 	},
	 	mounted:function(){
	 		this.getTransferPage();
	 	},
	 	methods:{
	 		getTransferPage:function(){
				var that = this;
				axios.post("/query/find",that.transferInfo).then(function(res){
					that.transfer = res.data.t;

				})
			},
			goSearch:function () {
	 			this.transferInfo.index=1;
	 			console.log("search")
				this.getTransferPage();
			},
			prevPage:function () {
	 			console.log("prev")
	 			if(this.transferInfo.index>1){
					this.transferInfo.index--;
					this.getTransferPage();
				}
				
			},
			nextPage:function () {
				console.log("next")
				if (this.transferInfo.index<this.transfer.pageCount) {
					this.transferInfo.index++;
					this.getTransferPage();
				}
			},
			goPage:function () {
				if (this.transferInfo.index<=this.transfer.pageCount && 1<=this.transferInfo.index) {
					this.getTransferPage();
				}else {
					alert("非法页码")
				}


			}
	 	}
	 	
	 	})
	 </script>
	</body>
	
</html>



